 /* 初始化 */
 * {
  margin: 0px;
  padding: 0px;
}
/* 水平垂直居中 */
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

label {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  bottom: 20px;
  z-index: 10;
}
input {
  display: none;
}

label[for="btn1"] {
  margin-left: 30%;
}

label[for="btn2"] {
  margin-left: 40%;
}

label[for="btn3"] {
  margin-left: 50%;
}

label[for="btn4"] {
  margin-left: 60%;
}

input[id="btn1"]:checked~label[for="btn1"] {
  background-color: red;
}

input[id="btn2"]:checked~label[for="btn2"] {
  background-color: red;
}

input[id="btn3"]:checked~label[for="btn3"] {
  background-color: red;
}

input[id="btn4"]:checked~label[for="btn4"] {
  background-color: red;
}

.box {
  width: calc(800px * 4);
  transition: all .5s;
}
.box img {
  width: 800px;
  height: 400px;
  float: left;
 
}
input[id="btn1"]:checked~.box {
  margin-left: calc(-800px * 0);
 
}

input[id="btn2"]:checked~.box {
  margin-left: calc(-800px * 1);
}

input[id="btn3"]:checked~.box {
  margin-left: calc(-800px * 2);
}

input[id="btn4"]:checked~.box {
  margin-left: calc(-800px * 3);
}